<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meteocal</title>
<link href="../css/create_event.css" rel="stylesheet" type="text/css" />
<f:metadata>
    <f:viewParam name="par" value="#{modificationBean.parameter}" />
</f:metadata>
<script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
<!--<script src=" http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
 #map-canvas {
 width: 350px;
 height: 200px;
 }
 </style>
<script type="text/javascript">
 var currentMarker = null;
 var map;
 var markers = [];
 function GetLocation() {
 var geocoder = new google.maps.Geocoder();
 var address = $('[id="#{p:component('address')}"]').val();
 geocoder.geocode({ 'address': address }, function (results, status) {
 if (status === google.maps.GeocoderStatus.OK) {
 var latitude = results[0].geometry.location.lat();
 var longitude = results[0].geometry.location.lng();
 $('[id="#{p:component('latitudine')}"]').val(latitude);
 $('[id="#{p:component('longitudine')}"]').val(longitude);
 $('[id="#{p:component('latitudineSX')}"]').val(latitude);
 $('[id="#{p:component('longitudineSX')}"]').val(longitude);
 var pos = new google.maps.LatLng(latitude, longitude);
 var mapOptions = {
 zoom: 12,
 center: pos,
 mapTypeId: google.maps.MapTypeId.TERRAIN
 };
 map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
 
 addMarker(new google.maps.LatLng(latitude,longitude));

 } else {
 alert("Request failed.");
 }
 });
 }
 
 function initialize() {
 var italy = new google.maps.LatLng(41.87194, 12.567379999999957);
 var mapOptions = {
 zoom: 12,
 center: italy,
 mapTypeId: google.maps.MapTypeId.TERRAIN
 };
 map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
 }
 
 function addMarker(location) {
 var marker = new google.maps.Marker({
 position: location,
 map: map
 });
 markers.push(marker);
 }
 
</script>
<script>
 function initialize() {
 var mapCanvas = document.getElementById('map-canvas');
 var mapOptions = {
 center: new google.maps.LatLng(44.5403, -78.5463),
 zoom: 8,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 var map = new google.maps.Map(mapCanvas, mapOptions)
 }
 google.maps.event.addDomListener(window, 'load', initialize);
</script>

</h:head>

    <h:body style="background-color:#81a4c7" onload="#{modificationBean.eventSet()}">
	<div id="wrap">
    	<div id="header">
            <a href="user_home3.xhtml"><img src="./../images/Logo.png" style="width:150px; height:150px;" /></a>
            <div id="welcome_txt" style="float:right; margin-top:90px;">
            	<h1>Welcome to Meteocal!</h1>
            </div>
        </div>
        <div id="central">
            <div id="event_area">
                <div id="event_container">
                    <div id="event_header">
                        <h1>Modification form</h1>
                    </div>
                    <h:form id="eventform" style="font-family: Comic Sans MS; color: #ffffff; font-size: 20px; margin-left: 20px;"  >
                        <h:panelGrid columns="1" id="evGrid">
                            <h:outputLabel for="name">Name:</h:outputLabel>
                            <p:inputText id="name" value="#{modificationBean.event.name}" style="width: 350px;">
                                <p:ajax update="namemsg"/>
                            </p:inputText>
                            <p:message id="namemsg" for="name" />

                            <h:outputLabel for="description">Description:</h:outputLabel>
                            <p:inputTextarea id="description" value="#{modificationBean.event.description}" style="min-width:350px; max-width: 350px;
                                                        min-height: 150px; max-height: 150px;" autoResize="false"/>

                            <h:outputLabel for="starttime">Start time:</h:outputLabel>
                            <p:calendar id="starttime" value="#{modificationBean.event.starttime}" pattern="MM/dd/yyyy HH:mm" stepMinute="15" style="width: 350px;" />

                            <h:outputLabel for="endtime">End time:</h:outputLabel>
                            <p:calendar id="endtime" value="#{modificationBean.event.endtime}" pattern="MM/dd/yyyy HH:mm" stepMinute="15" style="width: 350px;" />

                            <h:outputLabel for="address">Location:</h:outputLabel>                            
                            <p:inputText id="address" value="#{modificationBean.event.place}" style="width: 350px;" >
                            </p:inputText>
                            <p:message id="placemsg" for="address" />
                            <input type="button" onclick="GetLocation()" value="Confirm location" style="width: 358px; margin-top: 10px; margin-bottom: 10px; border:0; box-shadow:0px 2px 5px #000000; 
                                             float: left; background: #6cb364; color: white; font-size: 20px; font-family: Comic Sans MS;"/>
                            
                            <h:outputLabel for="latitude" style="display: none;">Latitude</h:outputLabel>
                            <p:inputText id="latitudineSX" value="#{modificationBean.event.lat}" style="display: none;"></p:inputText>
                            <h:outputLabel for="latitude" style="display: none;">Longitude</h:outputLabel>
                            <p:inputText id="longitudineSX" value="#{modificationBean.event.lon}" style="display: none;"></p:inputText>
                            
                            <div id="map-canvas"></div>
                            <p:outputLabel for="privacy" value="Event privacy:" />
                            <p:selectOneRadio id="privacy" value="#{modificationBean.event.private1}" style="width: 350px;">
                                <f:selectItem itemLabel="Private" itemValue="#{true}" />
                                <f:selectItem itemLabel="Public" itemValue="#{false}" />
                            </p:selectOneRadio>
                            <br />
                            <p:outputLabel for="indoor" value="Event location type:" />
                            <p:selectOneRadio id="indoor" value="#{modificationBean.event.indoor}" style="width: 350px;">
                                <f:selectItem itemLabel="Indoor" itemValue="#{true}" />
                                <f:selectItem itemLabel="Outdoor" itemValue="#{false}" />
                            </p:selectOneRadio>
                            <h:outputLabel for="searchUser">Invite other users (search by email)</h:outputLabel>
                            <p:messages id="boh" for="searchUser"></p:messages>
                            <p:autoComplete id="searchUser"  value="#{inviteBean.selectedUsers}" style=""
                                            completeMethod="#{inviteBean.suggestUsers}" 
                                var="user" 
                                itemLabel="#{user.email}" itemValue="#{user}"
                                converter="userConverter"
                                multiple="true">

                                <p:ajax event="itemSelect"/>

                                <p:column style="width:200px;text-align:center">
                                #{user.name} - #{user.email} 
                                </p:column>
                            </p:autoComplete>
                            
                            <p:commandButton id="submit" value="Modify" update="evGrid" style="width: 358px; margin-top: 10px; border:0; box-shadow:0px 2px 5px #000000; 
                                             float: left; background: #6cb364; color: white; font-family: Comic Sans MS;"
                                             action="#{modificationBean.updateEvent(inviteBean.selectedUsers)}"/>
                            <br />
                        </h:panelGrid>
                    </h:form>
                </div>
            </div>
            <div id="info">
                <div id="meteo_info">
                    <h1>Wheather forecast</h1>
                        <h:form id="eventcoorform" style="font-family: Comic Sans MS; color: #ffffff; font-size: 20px; margin-left: 35px;" >
                            <h:panelGrid columns="1" id="coorGrid">
                                <h:outputLabel for="latitudine" style="margin-left: 20px; display: none;">Latitude</h:outputLabel>
                                <p:inputText id="latitudine" value="#{eb.lat2}" style="display: none; width:360px; float:left; margin-right: 10px; margin-left: 20px;" />
                                <h:outputLabel for="longitudine" style="display: none; margin-left: 20px;">Longitude</h:outputLabel>
                                <p:inputText  id="longitudine" value="#{eb.lon2}" style="display: none; width:360px;  float:left; margin-right: 10px; margin-left: 20px;" />
                                <br/>
                                <p:commandButton value="Get weather conditions" action="#{eb.retrieveConditions()}" update="coorGrid" style="width: 370px; border:0; box-shadow:0px 2px 5px #000000; 
                                                 float: left; margin-left: 20px; background: #6cb364; color: white; font-family: Comic Sans MS;"
                                                 />
                                
                                <ui:repeat value="#{eb.weatherConditions}" var="weather" >
                                    <li style=" font-family: Comic Sans MS; color: white; font-size: 15px;">
                                        #{weather}
                                    </li>
                                </ui:repeat>
                                <br />
                            </h:panelGrid>
                        </h:form>
                    
                </div>
            </div>
        </div>
        <div id="footer">
            <p>Software engineering 2</p>
            Project 2014-2015<br />
            Rimoldi_Lattari<br />
            <p></p>
        </div>
    </div>
</h:body>
</html>

